<template>
  <div class="card">
    <div class="box">
      <div class="box-top">
        <div class="title">
          <div class="left">设备看板</div>
          <div class="right">
            <a-button type="link" @click="goback()">查看更多</a-button>
          </div>
        </div>
        <div class="initdonutPlot-box">
          <div class="item left">在线设备数: {{ this.onNumber }}</div>
          <div class="item center">
            <div id="container33"></div>
          </div>
          <div class="item right">离线设备数: {{ this.offNumber }}</div>
        </div>
      </div>
      <div class="content" style="margin-top: 15px">
        <div id="columnPlot1" style="height: 250px"></div>
      </div>
    </div>
  </div>
</template>
<script>
import { Donut, GroupedColumn } from "@antv/g2plot";
import { getEquipmentAll } from "@/request/api";
import { getEqu } from "@/request/newApi";
export default {
  props: {},
  data() {
    return {
      btnActive: 1,
      donutPlot: null,
      onNumber: "",
      offNumber: "",
      offmain: 100,
      dataed: [
        {
          type: "在线设备",
          value: "25",
        },
        {
          type: "离线设备",
          value: "15",
        },
      ],
      dataid: [],
    };
  },
  components: {},
  created() {
    this.getEqu();
  },
  mounted() {
    this.getEquipmentAll();
    this.initGroupedColumn();
  },
  methods: {
    // 获取设备在线离线数
    async getEquipmentAll() {
      let res = await getEquipmentAll();
      if (res.data.code === 200) {
        this.onNumber = res.data.result.onNumber;
        this.offNumber = res.data.result.offNumber;
        this.offmain = res.data.result.sumNumber;
        this.dataed = [
          {
            type: "在线设备",
            value: this.onNumber,
          },
          {
            type: "离线设备",
            value: this.offNumber,
          },
        ];
        if (this.onNumber || this.offNumber) {
          this.initdonutPlot();
        }
      }
    },
    async getEqu() {
      this.tableLoading = true;
      let { data } = await getEqu({
        pageNum: 1,
        pageSize: 8,
      });
      console.log(data);
      if (data.code === 200) {
        const reducer = (accumulator, currentValue) =>
          accumulator + currentValue;
        let newArrlist = data.result.list;

        newArrlist.forEach((item, index) => {
          item.title = `项目${index + 1}`;
          if (item.equipentmentInfoList.length > 0) {
            let onNumberAry = item.equipentmentInfoList.map((item) => {
              return item.onNumber ? item.onNumber : 0;
            });
            let offNumberAry = item.equipentmentInfoList.map((item) => {
              return item.offNumber ? item.offNumber : 0;
            });
            item.onNumberSum = onNumberAry.reduce(reducer);
            item.offNumberSum = offNumberAry.reduce(reducer);
          } else {
            item.onNumberSum = 0;
            item.offNumberSum = 0;
          }
        });
        let onAry = JSON.parse(JSON.stringify(data.result.list));
        let offAry = JSON.parse(JSON.stringify(data.result.list));
        onAry.forEach((item, index) => {
          item.state = "在线";
          item.在线状态 = item.onNumberSum;
        });
        offAry.forEach((item, index) => {
          item.state = "离线";
          item.在线状态 = item.offNumberSum;
        });
        let allAry = onAry.concat(offAry);
        this.columnPlot.changeData(allAry);
      }
      this.tableLoading = false;
    },
    goback() {
      this.$router.push({
        path: "/data_equipmentList",
      });
    },
    initGroupedColumn() {
      this.columnPlot = new GroupedColumn(
        document.getElementById("columnPlot1"),
        {
          forceFit: true,
          data: this.dataid,
          xField: "proName",
          yField: "在线状态",
          yAxis: {
            min: 0,
            // max: 1200,
          },
          meta: {
            proName: {
              alias: " ",
              // formatter:(v)=>{return v.slice(0,3)}
            },
          },
          // tooltip: {
          //   formatter: (proName,在线状态,state) => {
          //     return {
          //       name: state,
          //       value: 在线状态,
          //     };
          //   },
          // },
          label: {
            visible: true,
          },
          groupField: "state", //根据该字段分组
          color: ["rgba(60, 144, 247, 1)", "rgba(85, 191, 192, 1)"],
        }
      );
      this.columnPlot.render();
    },
    initdonutPlot() {
      this.donutPlot = new Donut(document.getElementById("container33"), {
        radius: 1,
        innerRadius: 0.8,
        data: this.dataed,
        color: ["rgba(60, 144, 247, 1)", "rgba(85, 191, 192, 1)"],
        angleField: "value",
        colorField: "type",
        label: {
          visible: false,
        },
        legend: {
          visible: false,
        },
        statistic: {
          visible: true,
          content: {
            name: "设备总数",
            value: this.offmain,
          },
        },
        tooltip: {
          visible: true,
        },
      });
      this.donutPlot.render();
    },
  },
};
</script>
<style lang="less" scoped>
@import "~@/assets/css/base.less";
.box {
  background: #fff;
  border-top: 1px solid transparent;
  height: 500px;
  margin-bottom: 20px;
  .box-top {
    border-bottom: 1px solid #eee;
    .title {
      margin: 10px 15px 0;
      display: flex;
      justify-content: space-between;
    }
    .initdonutPlot-box {
      display: flex;
      align-items: center;
      justify-content: center;
      .center {
        width: 200px;
        height: 200px;
        #container33 {
          width: 200px;
          height: 200px;
        }
      }
    }
  }
}
</style>